<template>
  <div class="list-component">
      <!--<div class="search-bar">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline">
          <el-form-item label="车辆名称">
            <el-input v-model="searchObj.name" placeholder="请输入车辆名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>-->
      <div class="list">
        <div class="button-bar">
          <el-button class="btn" type="primary" size="mini" icon="el-icon-plus"  @click="onAdd"  v-pms="'carDeviceEdit'">新建</el-button>
          <!--<el-button class="btn" type="primary" size="mini" icon="el-icon-edit" @click="onEdit" >编辑</el-button>-->
          <el-button class="btn" type="danger" size="mini" icon="el-icon-remove-outline" @click="onDelete" v-pms="'carDeviceDelete'">解绑</el-button>
        </div>
        <div class="data">
          <el-table :data="listData.data"  ref="listData" @selection-change="selectChange" stripe  v-height="'auto'" >
              <el-table-column type="selection"  align="center" width="55"></el-table-column>
              <el-table-column type="index" label="序号" prop="index" align="center" width="60px" >
                  <div slot-scope="scope">
                      {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                  </div>
              </el-table-column>
              <el-table-column label="车辆名称" prop="vehicleName" ></el-table-column>
          	<el-table-column label="车牌号" prop="vehicleCode" ></el-table-column>
			<el-table-column label="设备名称" prop="deviceName" ></el-table-column>
          	<el-table-column label="设备编号" prop="code" ></el-table-column>
              <el-table-column label="开始时间">
                  <slot slot-scope="scope">
                      <span :title="scope.row.startTime">{{ scope.row.startTime }}</span>
                  </slot>
              </el-table-column>
             <!-- <el-table-column label="结束时间">
                  <slot slot-scope="scope">
                      <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                  </slot>
              </el-table-column>-->
          	<el-table-column label="绑定状态">
                <slot slot-scope="scope">
                   <span :style="{color: scope.row.endTime?'#00B83F':'red'}">{{ scope.row.endTime?"已解绑":"绑定中" }}</span>
                </slot>
            </el-table-column>
             <!-- <el-table-column label="操作" prop="status" align="center" v-if="false">
                  <slot slot-scope="scope">
                      <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                  </slot>
              </el-table-column>-->
          </el-table>
        </div>
          <el-pagination layout="prev, pager, next"
                         :current-page="listData.pageNum"
                         :page-size="listData.pageSize"
                         :total="listData.total"
                         @current-change="getList"
                         @prev-click="getList"
                         @next-click="getList"
          ></el-pagination>
      </div>
    <el-dialog :title="optType" :visible.sync="showDialog">
      <component v-bind:is="curComponent" :car-list="carList" :device-list="deviceList" @closeDialog="closeDialog" :initData="initData"  @refresh="refresh"></component>
    </el-dialog>
  </div>
</template>
<script>
import edit from "./carDevice-edit.vue";
import Details from "./carDevice-detail";
export default {
  components: { edit, Details },
  data() {
    return {
      listData: {
        pageNum: 1, //页码
        pageSize:15,
        total: 5, //总共条数
        data: []
      },
      checked:[],//选择的列表
      optType: "编辑", //新增区划/编辑区划/导入/导出
      showDialog: false,
      curComponent: "edit", //Details，edit/导入/到处...
      initData:{},
	  approveStateList:[],
        carList:[],
        deviceList:[]
    };
  },
  watch:{
    showDialog(val){
      if(!val){
        this.initData={}
        this.checked=[]
        this.$refs.listData.clearSelection();
      }
    }
  },
  methods: {
    getList(pageNum){
        var submitData={
            current:typeof pageNum=='number' ? pageNum : this.listData.pageNum,
            size:this.listData.pageSize
        };

        this.$http.getCarDevices(submitData)
        .then((res)=>{
            var data=res.data.data;
            this.$set(this.listData,'pageNum',data.current);
            this.$set(this.listData,'pageSize',data.size);
            this.$set(this.listData,'total',data.total);
            this.$set(this.listData,'data',this.transData(data.records))

        }).catch((err)=>{
            throw(err)
        })
    },
    //列表选择发生改变
      selectChange(val){
       this.checked = val;
      },
    refresh(){
      this.getList()
    },

    //添加车辆
    onAdd() {
      this.$refs.listData.clearSelection();
      this.optType = "新增";
      this.showDialog = true;
      this.curComponent=edit
      this.$nextTick(()=>{
        this.checked = [];
        this.initData = null
      })
    },

    //编辑车辆
    onEdit(index, row) {
      if (this.checked.length > 1) {
        this.$message.warning("只能选中一个");
        return;
      } else if (this.checked.length === 0) {
        this.$message.warning("请选中要编辑的车辆");
        return;
      }

      this.curComponent=edit
      this.optType = "编辑车辆";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=this.checked[0]
      })
    },
      viewDetail(rowData){
        this.$message.info("暂无内容!!!");
          /*this.curComponent = Details
          this.optType = "车辆详情";
          this.showDialog = true;
          this.$nextTick(()=>{
              this.initData = rowData
          })*/
      },
    //删除车辆
    onDelete() {
      if(this.checked.length===0){
        this.$message.warning("请选择要解绑的车辆!")
        return
      }else if(this.checked.length > 1){
          this.$message.warning("只能一个一个解绑!")
          return
      }

	  this.$confirm('请确认是否解绑?', '警告', {
	     confirmButtonText: '确定',
	     cancelButtonText: '取消',
	     type: 'warning'
	   }).then(() => {
			var submitData={id:this.checked[0].id}
			this.$http.delCarDevice(submitData)
			.then(res => {
				this.$message.success("解绑成功!")
			    this.getList(); //重新加载列表
			}).catch(err => {
				throw (err);
			});
	   })
    },

    closeDialog(bool) {
      this.showDialog = bool;
    },

    //查看详情
    showDetails(rowData){
      this.curComponent=Details
      this.optType = "查看详情";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=rowData.row
      })
    },

	transData(data){
		data.forEach((item)=>{
			this.approveStateList.forEach((item1)=>{
				if(item.status==item1.code){
					item.statusName=item1.name
				}
			})
		})
		return data;
	},
    getCarList(){
      this.$http.getCarList().then(res => {
          this.carList = res.data.data;
      }).catch(err => {
          throw ("查询车辆接口报错：", err);
      })
    },
      getDeviceList(){
         this.$http.getDeviceList().then(res => {
             this.deviceList = res.data.data;
         }).catch( err => {
             throw ("查询gps设备接口报错",err);
         })
      }
  },
  created() {
    this.getList();
    this.getCarList();
    this.getDeviceList();
  }
};
</script>
